<template>
  <div class="main_box" v-loading="loading">
    <el-page-header @back="goBack" content="比赛详情" class="allTeam_title">
    </el-page-header>
    <div class="gameTitle"><h1 style="margin: 0 0 20px 0;">{{game.gameName}}</h1></div>
    <div class="gameImage">
      <el-image :src="game.gameImagesec">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </div>
    <div class="Information">
      <div class="left">
        <div class="gameInformation">
          <span>比赛说明</span>
          <el-button style="float: right" @click="handleSignUp" type="success">立即报名</el-button>
        </div>
        <div class="richText_text">
          <div class="ql-editor " v-html="game.introduce">{{ game.introduce }}</div>
        </div>
      </div>
      <div class="right">
        <div class="right_list">
          <div class="gameInformation"><span>比赛类型</span></div>
          <div class="rightText"><span v-for="temp of game.direction" :key="temp">{{ ' '+temp}}</span></div>
        </div>
        <div class="right_list">
          <div class="gameInformation"><span>级别</span></div>
          <div class="rightText">{{game.gamelevel}}</div>
        </div>
        <div class="right_list">
          <div class="gameInformation"><span>参赛对象</span></div>
          <div class="rightText">{{game.gameforpeople}}</div>
        </div>
        <div class="right_list">
          <div class="gameInformation"><span>参赛方式</span></div>
          <div class="rightText">{{game.type}}</div>
        </div>
        <div class="right_list">
          <div class="gameInformation"><span>参赛费用</span></div>
          <div class="rightText">{{game.money}}</div>
        </div>
        <div class="right_list">
          <div class="gameInformation"><span>报名时间</span></div>
          <div class="rightText">{{game.signupTime + '~' + game.signendTime}}</div>
        </div>
        <div class="right_list">
          <div class="gameInformation"><span>比赛时间</span></div>
          <div class="rightText">{{game.beginTime + '~' + game.endTime}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "gamesDetails",
  data() {
    return{
      game: {},
      active: 2,
      loading: true
    }
  },
  methods: {
    goBack() {
      this.$router.push('/information/competitionList');
    },
    findGroup(temp){
      const gameID = window.sessionStorage.getItem('gameID');
      return temp.data.info.find((group) => {
        const JSONGameID = JSON.stringify(group.gameID);
        return JSONGameID === gameID;
      });
    },
    async handleSignUp(){
      const OwnGroup = await this.$api.getOwnGroupList();
      // const OwnGame = OwnGroup.data.info;
      // OwnGroup.data.info.find((group) => {
      //   const JSONGameID = JSON.stringify(group.gameID);
      //   return JSONGameID === gameID;
      // });
      const repeat = await (OwnGroup.data.info === undefined)?undefined:this.findGroup(OwnGroup);
      // console.log('打印：',repeat);
      const level = window.sessionStorage.getItem('level');
      const nowTime = new Date();
      const beginTime = new Date(this.game.beginTime);
      const goSignUp = nowTime < beginTime;
      if(level === '1' && goSignUp && repeat === undefined){
        let gameID = window.sessionStorage.getItem('gameID')
        this.$api.signUp(gameID)
            .then(res => {
              res === '1';
              this.$router.push('/signUp')
            });
      } else if(level !== '1') {
        this.$alert('管理员不能报名！', '权限限制', {
          confirmButtonText: '确定'
        });
      } else if(repeat!==undefined){
        this.$alert('不能报重复报名！', '您已经报名', {
          confirmButtonText: '确定'
        });
      } else {
        this.$alert('报名以结束！', '无法报名', {
          confirmButtonText: '确定'
        });
      }

    },
    getGamebyId(){
      this.loading = true;
      let gameID = JSON.parse(window.sessionStorage.getItem("gameID"));
      this.$api.getGamebyId(gameID)
        .then(res => {
          if(res.success){
            let data = {...res.data.AdminName};
            const a = res.data.AdminName.direction;
            const text = JSON.parse(a);
            delete data.direction;
            data.direction = text;
            this.game = data;
            // console.log('比赛信息：',this.game);
          } else {
            this.$message.warning(res.message);
          }
          setTimeout(()=>{
            this.loading = false;
          },300);
        })
        .catch(err =>{
          console.log(err);
        });
    }
  },
  mounted() {
    this.getGamebyId();
  },
  created() {
  }
}
</script>

<style lang="less" scoped>
.main_box{
  width: 90%;
  background-color: #ffffff;
  padding: 20px;
  margin: 10px 40px;
  .gameImage{
    width: 1200px;
    height: 300px;
    //background-color: #409EFF;
    margin: 0 auto;
    .el-image{
      height: 300px;
      width: 100%;
      .image-slot{
        line-height: 300px;
        text-align: center;
        font-size: 100px;
      }
    }
  }
  .gameTitle {
    text-align: center;
    font-size: 30px;
    font-weight: bolder;
  }
  .Information{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1200px;
    margin: 40px auto;
    .left{
      width: 900px;
      .gameInformation{
        font-size: 25px;
        font-weight: bolder;
        border-left: 10px solid #1e6c22;
        padding-left: 10px;
      }
    }
    .right{
      width: 246px;
      .right_list{
        margin-bottom: 10px;
        .gameInformation{
          display: inline-block;
          color: #737070;
          font-size: 15px;
          font-weight: bolder;
          border-left: 7px solid #1e6c22;
          padding-left: 10px;
        }
        .rightText{
          display: inline-block;
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
